<template>
    <div>
            <Card>
                <p slot="title">
				    添加用户
			    </p>
                <div>
                    <Form class="step-form" ref="userData" :model="userData" :rules="userDataRules" :label-width="100">
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="用户名称：" prop="loginName" label-position="left" :label-width="150">
                                    <Input :disabled="hasSubmit" v-model="userData.loginName" type="text" placeholder="输入数据不能为空" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <!--2019-09-09 gyp 和手机端保持一致，暂不显示-->
                        <!--<Row span="12">
                            <i-col span="12" >
                                <FormItem label="输入密码："  prop="password" label-position="left" :label-width="150">
                                    <Input :disabled="hasSubmit" v-model="userData.password" type="password" placeholder="输入数据不能为空" />
                                </FormItem>
                            </i-col>
                        </Row>-->
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="真实姓名：" prop="realName" label-position="left" :label-width="150">
                                    <Input :disabled="hasSubmit" v-model="userData.realName" type="text" placeholder="输入数据不能为空" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="手机号：" prop="mobile" label-position="left" :label-width="150">
                                    <Input :disabled="hasSubmit" v-model="userData.mobile" type="text" placeholder="手机号不能为空" @on-blur="verificationMobile"/>
                                </FormItem>
                            </i-col>
                        </Row>
                       
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="身份证号：" prop="cardNum" label-position="left" :label-width="150">
                                    <Input :disabled="hasSubmit" v-model="userData.cardNum" type="text" placeholder="身份证号不能为空" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="企业设置：" prop="partyId"  label-position="left" :label-width="150">
                                    <Select @on-change="setParty" style="width:340px" v-model='userData.partyId' label-in-value>
                                        <Option v-for="(item,index) in partyData" :value="item.id" :key="index" :label="item.name">{{ item.name }}</Option>
                                    </Select>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="用户角色：" prop="userRoles" label-position="left" :label-width="150">
                                   <Radio-group v-model="userData.userRoles">
                                        <Radio :label="1">法人</Radio>
                                        <Radio :label="2">签约代理人</Radio>
                                        <Radio :label="3">销售经理</Radio>
                                        <Radio :label="4">非企业员工</Radio>
                                    </Radio-group>
                                </FormItem>
                            </i-col>
                        </Row>
                        <!--<Row span="12">
                            <i-col span="12" >
                                <FormItem label="发布车源：" prop="is_car" label-position="left" :label-width="150">
                                   <Radio-group v-model="userData.isCar">
                                        <Radio :label="0">禁止</Radio>
                                        <Radio :label="1">允许</Radio>
                                    </Radio-group>
                                </FormItem>
                            </i-col>
                        </Row>-->
                        <Row span="12">
                            <i-col span="10">
                                <FormItem label="身份证正面：" prop="cardUrl" label-position="left" :label-width="150">
                                    <img v-if="userData.cardUrl !== ''" :src="userData.cardUrl" height="200" width="200">
                                </FormItem>
                            </i-col>
                            <i-col span="1">
                                <Upload
                                    :show-upload-list="false"
                                    :before-upload="handleUpload"
                                    action="//jsonplaceholder.typicode.com/posts/">
                                    <Button>上传</Button>
                                </Upload>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="10">
                                <FormItem label="身份证背面：" prop="cardBackUrl" label-position="left" :label-width="150">
                                    <img v-if="userData.cardBackUrl !== ''" :src="userData.cardBackUrl" height="200" width="200">
                                </FormItem>
                            </i-col>
                            <i-col span="1">
                                <Upload
                                    :show-upload-list="false"
                                    :before-upload="handleUploadBack"
                                    action="//jsonplaceholder.typicode.com/posts/">
                                    <Button>上传</Button>
                                </Upload>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="10">
                                <FormItem label="名片图片：" prop="businessCardUrl" label-position="left" :label-width="150">
                                    <img v-if="userData.businessCardUrl !== ''" :src="userData.businessCardUrl" height="200" width="200">
                                </FormItem>
                            </i-col>
                            <i-col span="1">
                                <Upload
                                    :show-upload-list="false"
                                    :before-upload="businesshandleUpload"
                                    action="//jsonplaceholder.typicode.com/posts/">
                                    <Button>上传</Button>
                                </Upload>
                            </i-col>
                        </Row>
                        <!-- <Row span="12">
                            <i-col span="10">
                                <FormItem label="名片图片：" prop="businessCardUrl" label-position="left" :label-width="150">
                                    <Upload
                                    style="card-upload"
                                    :show-upload-list="false"
                                    :before-upload="handleUpload"
                                    action="//jsonplaceholder.typicode.com/posts/">
                                        <template v-if="userData.businessCardUrl.length == 0 && !uploadLoading">
                                            <div style="width: 60px;height: 60px;border: 1px solid #d8d8d8; text-align: center; line-height: 60px">
                                            <Icon type="ios-cloud-upload" size="32" style="color: #3399ff"></Icon>
                                            </div>
                                        </template>
                                        <template v-if="userData.businessCardUrl.length > 0 && !uploadLoading">
                                            <img v-if="userData.businessCardUrl !== ''" :src="userData.businessCardUrl" height="200" width="200">
                                            <div class="demo-upload-list-cover">
                                                <Icon type="ios-eye-outline" @click.native="handleView(userData.businessCardUrl)"></Icon>
                                            </div>
                                        </template>
                                        <Spin v-if="uploadLoading"></Spin>
                                    </Upload>
                                </FormItem>
                            </i-col>
                            <i-col span="1">
                                
                            </i-col>
                        </Row> -->

                        <FormItem >
                            <Button :disabled="hasSubmit" @click="saveData" style="width:100px;" type="primary">提交</Button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <Button :disabled="hasSubmit" @click="goBack" style="width:100px;" >返回</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
            <Modal v-model="tipsModel" width="360">
                <p slot="header" style="color:#f60;">
                    <Icon type="information-circled"></Icon>
                    <span>提示</span>
                </p>
                <div style="text-align:center">
                    <p style="font-size:18px;">手机号不能重复！</p>
                </div>
                <div slot="footer">
                    <Button type="info" @click="cancel()" size="large">取消</Button>
                </div>
            </Modal>
            <Modal v-model="userRoleModel" width="360">
                <p slot="header" style="color:#f60;">
                    <Icon type="information-circled"></Icon>
                    <span>提示</span>
                </p>
                <div style="text-align:center">
                    <p style="font-size:18px;">该角色下以后用户</p>
                </div>
                <div slot="footer">
                    <Button type="info" @click="cancel_userrole()" size="large">取消</Button>
                </div>
            </Modal>
    </div>
</template>

<script>
import ajax from '../../../libs/axios.js'
export default {
    name: 'addUser',
    data () {
        return {
            testModelShow:false,
            symptomList:[],
            selectModel:[],
            partyData:[],//已认证公司的集合
            tipsModel:false,//手机号重复提示
            userRoleModel:false,//用户角色提示
            userData: {
                id:'',
                loginName:'',
                password:'',
                realName:'',
                cardUrl: '',
                cardBackUrl: '',
                businessCardUrl:'',
                mobile:'',
                isCar:0,
                cardNum:'',
                partyId:'',//企业Id
                partyName:'',//企业名称
                userRoles:3
            },
            userDataRules: {
                loginName: [
                    { required: true, message: '请输入用户名称', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                ],
                // 2019-09-09 gyp 和手机端保持一致，暂不显示
                // password: [
                //     { required: true, message: '请输入密码', trigger: 'blur'},
                //     {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                // ],
                password1: [
                    { required: true, message: '请输入确认密码', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                ],
                realName: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过5个字符', trigger: 'blur'}
                ],
                mobile: [
                    { required: true, message: '请输入手机号码', trigger: 'blur'}
                ],
                cardNum: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur'},
                    {type: 'string', max: 18, message: '不能超过18个字符', trigger: 'blur'},
                    {type: 'string', min: 18, message: '请输入正确身份证号码', trigger: 'blur'}
                ],
                partyId: [
                    { type: 'string', required: true, message: '请选择企业', trigger: 'change' }
                ]            
            },
            hasSubmit: false,
            // 图片上传
            file: null,
            status: 'wait',
            uploadLoading: false, // 上传图片时候的加载效果
            uploadType:0 //上传类型，1：身份证图片类型、2：名片图片类型
        }
    },
    methods: {
        // 数据初始化
        init () {
            this.selectCjPartyByStatus();
        },
        //手机号验证,不能重复添加
        verificationMobile:function(){

            let _that = this;
            let url = 'adminlogin/selectCjUserByType'
            let data = {
                type:1,
                data: _that.userData.mobile
            }
            ajax.formRes(url, data).then(res => {
                if(res.data.length > 0){
                    _that.tipsModel = true;
                    _that.userData.mobile = null;
                }
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
            
        },
        /*验证用户角色 */
        verificationUserRole:function(){
            let _that = this;
            return new  Promise((resolve, reject) => {
              let url = 'adminlogin/selectByPartyIdAndUserRole'
              debugger
              let data = {
                  partyId:_that.userData.partyId,
                  userRoles: _that.userData.userRoles
              }
              ajax.formRes(url, data).then(res => {
                  if(res.data.length > 0){
                      resolve(false)
                  }
                  resolve(true)
              }).catch(res => {
                  console.log('有错误信息')
                  resolve(false)
              })
            })
        },
        //手机号重复提示 取消
        cancel:function(){
            this.tipsModel = false
        },
        cancel_userrole:function(){
            this.userRoleModel = false
        },
        // 身份证正面图片上传
        handleUpload (file) {
            this.uploadType = 1
            this.file = file
            this.upload()
            return false;
        },
        // 身份证背面图片上传
        handleUploadBack (file) {
            this.uploadType = 3
            this.file = file
            this.upload()
            return false;
        },
        //名片图片上传
        businesshandleUpload (file) {
            this.uploadType = 2
            this.file = file
            this.upload()
            return false;
        },
        // 上传图片
        upload () {
            let that = this
            let fileName = that.file.name
            //FormData 对象
            let formData = new FormData()
            console.log(fileName)
            this.uploadLoading = true
            // 文件对象
            formData.append("img", that.file)
            formData.append("type", "personalInfo")
            ajax.upload('adminlogin/file/uploadOssImage',formData).then(function (res) {
                if(that.uploadType == 1){
                    setTimeout(() => {
                        that.userData.cardUrl = res.url
                        that.file = ''
                        that.$Message.success('身份证正面图片上传成功')
                    }, 500);
                }else if(that.uploadType == 2){
                    setTimeout(() => {
                        that.userData.businessCardUrl = res.url
                        that.file = ''
                        that.$Message.success('名片上传成功')
                    }, 500);
                }if(that.uploadType == 3){
                    setTimeout(() => {
                        that.userData.cardBackUrl = res.url
                        that.file = ''
                        that.$Message.success('身份证背面图片上传成功')
                    }, 500);
                }            
                //that.uploadLoading = false
            }, function (err) {
                console.log(err)
                //this.uploadLoading = false
            }).catch(function (error) {
                console.log(error)
                //this.uploadLoading = false
            })
        },
        selectCjPartyByStatus () {
            this.partyData = [];
            let _that = this;
            let url = 'adminlogin/selectCjPartyByStatus'
            let data = {
                statusValue:2,
                pageSize: 9999,
                pageNum: 1,
                partyId:'-1'
            }
            ajax.formRes(url, data).then(res => {
                _that.partyData = res.data;
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        setParty(obj){
            this.userData.partyId = obj.value;
            this.userData.partyName = obj.label;
        },
        // 添加数据
        saveData () {
            let that = this
            
            that.$refs['userData'].validate((valid) => {
                if (valid) {
                    that.hasSubmit = true
                    let flag = that.userData.userDataRules
                    let result = false
                    if(flag == 1 || flag == 2){//是否需要对角色验证
                        that.verificationUserRole().then(res => {
                            if(res){
                                result = true
                            }else{
                                that.userRoleModel = true
                                result = false
                            }
                        })
                    }else{
                        result = true
                    }
                    if(result){
                        let url = 'adminlogin/addCjUserInfo'
                        let data = that.userData
                        ajax.formRes(url, data).then(res => {
                            // success
                            console.log('****************************')
                            that.$Message.success('新增数据成功,页面正在跳转')
                            that.hasSubmit = false
                                let argu = {
                                }
                                that.$router.push({
                                    name: 'personalindex',
                                    params: argu
                                })
                        }).catch(res => {
                            console.log('有错误信息')
                            // fail
                        })
                    }
                } else {
                    console.log('新增失败。。。')
                }
            })
        },
        goBack () {
            this.$router.push({
                name: 'personalindex'
            })
        },
        
    },
    created: function () {
        this.init()
    },
    activated: function () {
        this.init()
    }
}
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>

